<template>
  <div class="main-page">
    <PageSearch
      :search-form-config="searchFormConfig"
      :form-data.sync="formData"
      @searchBtnClick="handleSearch"
      @exportBtnClick="handleExport"
    />
    <PageContent
      ref="pageContent"
      :form-data="formData"
      :content-table-config="contentConfig"
    >
      <template #operate="{ row }">
        <el-button
          type="text"
          size="small"
          icon="el-icon-view"
          @click="previewOrder(row)"
        >
          查看
        </el-button>
        <el-button
          type="text"
          size="small"
          icon="el-icon-edit"
          @click="editOrder(row)"
        >
          编辑
        </el-button>
        <el-button
          type="text"
          size="small"
          icon="el-icon-delete"
          class="delete-btn"
          @click="handleDelete(row)"
        >
          删除
        </el-button>
      </template>
    </PageContent>

    <PageModal
      :modal-form-data="modalFormData"
      :modal-form-config="modalFormConfig"
      :visible.sync="dialogVisible"
      title="编辑订单"
      :btn-loading="confirmBtnLoading"
      @confirm="handleConfirm"
    />
    <!-- 订单详情 -->
    <order-info :order-id="orderId" :show.sync="showOrderInfo"></order-info>
  </div>
</template>

<script>
import { contentConfig } from "./config/content.config";
import { searchFormConfig } from "./config/search.config";
import { modalFormConfig } from "./config/modal.config";
import OrderInfo from "./orderInfo.vue"
import { fetchUpdateOrderStatus, fetchDeleteOrder } from "@/api/order";
import localCache from "@/utils/cache";
export default {
  name: "OrderList",
  components:{
    OrderInfo
  },
  data() {
    return {
      orderId:"",
      showOrderInfo:false,
      contentConfig,
      searchFormConfig,
      modalFormConfig,
      btnLoading: false,
      confirmBtnLoading: false,
      dialogVisible: false,
      formData: {}, // 搜索表单数据
      modalFormData: {}, // 模态框表单数据
    };
  },
  mounted() {
    this.initSelectOptions();
  },
  methods: {
    handleSearch() {
      this.$refs.pageContent.queryTblMain();
    },
    handleExport() {
      const url = process.env.VUE_APP_BASE_API;
      this.axios({
        method: "get",
        url: url + "/order/export",
        responseType: "blob",
        params: this.formData,
        headers: {
          Authorization: localCache.getCache("token"),
        },
      }).then((res) => {
        this.$download.excel(res.data, "订单列表.xlsx");
      });
    },
    previewOrder({orderId}) {
      this.orderId="";
      this.$nextTick(() => {
        this.orderId = orderId;
        this.showOrderInfo = true;
      });
    },
    editOrder(row) {
      row.statusValue = +row.statusValue;
      this.dialogVisible = true;
      this.modalFormData = { ...this.modalFormData, ...row };
    },

    handleDelete({ orderId }) {
      this.$confirm("确认删除该订单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          fetchDeleteOrder(orderId).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.$refs.pageContent.queryTblMain();
          });
        })
        .catch(() => {});
    },
    handleConfirm(data) {
      this.confirmBtnLoading = true;
      const { orderId: id, statusValue } = { ...this.modalFormData, ...data };
      const params = { id, statusValue };
      fetchUpdateOrderStatus(params)
        .then(() => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.$refs.pageContent.queryTblMain();
        })
        .finally(() => {
          this.confirmBtnLoading = false;
          this.dialogVisible = false;
        });
    },
  },
};
</script>
